import React from 'react';
import { Modal, Form, Spin, Input, Select, DatePicker } from 'antd';
import moment from 'moment'

const { Option } = Select;

@Form.create()
class AddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dateTime: '',
      selectedRowKeys: [],
    };
  }

  handleOk = e => {
    const { onOk, form } = this.props;
    const { validateFields, getFieldsValue } = form;
    let _this = this;
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = { ...getFieldsValue() };
      data.authId = _this.props.authDetail&&_this.props.authDetail.authId?_this.props.authDetail.authId:'';
      onOk(data);
    });
  };

  handleCancel = e => {
    const { onCancel } = this.props;
    onCancel();
  };

  timeSelect = (value, dateString) => {
    this.setState({
      dateTime: dateString,
    });
  };

  render() {
    const { form, loading, authDetail, pwdTypeList, ...addModalProps } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    return (
      <Modal {...addModalProps} onOk={this.handleOk} onCancel={this.handleCancel}>
        <Spin spinning={loading}>
          <Form style={{ paddingRight: '20px' }} name="roleCode" {...formItemLayout}>
            {/* <Form.Item label="所属系统" name="systemName">
              {getFieldDecorator('systemName', {
                initialValue: authDetail && authDetail.systemName ? authDetail.systemName : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入所属系统',
                  },
                ],
              })(<Input disabled placeholder="请输入所属系统" />)}
            </Form.Item> */}
            <Form.Item label="权限名称" name="authName">
              {getFieldDecorator('authName', {
                initialValue: authDetail && authDetail.authName ? authDetail.authName : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入权限名称',
                  },
                ],
              })(<Input placeholder="请输入权限名称" />)}
            </Form.Item>
            <Form.Item label="权限类型" name="authType">
              {getFieldDecorator('authType', {
                initialValue: authDetail && authDetail.authType ? authDetail.authType.toString() : '',
                rules: [
                  {
                    required: true,
                    message: '请选择权限类型',
                  },
                ],
              })(
                <Select placeholder="请选择权限类型">
                  <Option value="expand">根节点</Option>
                  <Option value="url">菜单</Option>
                  <Option value="button">按钮</Option>
                  <Option value="auth">权限</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="权限样式" name="modelStyle">
              {getFieldDecorator('modelStyle', {
                initialValue: authDetail && authDetail.modelStyle ? authDetail.modelStyle : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入权限样式',
                  },
                ],
              })(<Input placeholder="请输入权限样式" />)}
            </Form.Item>
            <Form.Item label="URL" name="url">
              {getFieldDecorator('url', {
                initialValue: authDetail && authDetail.url ? authDetail.url : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入url',
                  },
                ],
              })(<Input placeholder="请输入url" />)}
            </Form.Item>
            <Form.Item label="排序" name="dispOrder">
              {getFieldDecorator('dispOrder', {
                initialValue: authDetail && authDetail.dispOrder ? authDetail.dispOrder : '',
                // initialValue: '',
                rules: [
                  {
                    required: true,
                    message: '请输入排序',
                  },
                ],
              })(<Input placeholder="请输入排序" />)}
            </Form.Item>
            <Form.Item label="备注" name="remark">
              {getFieldDecorator('remark', {
                initialValue: authDetail && authDetail.remark ? authDetail.remark : '',
                // initialValue: '',
                rules: [
                  {
                    required: false,
                    message: '请输入备注',
                  },
                ],
              })(<Input placeholder="请输入备注" />)}
            </Form.Item>
          </Form>
        </Spin>
      </Modal>
    );
  }
}

export default AddModal;
